<template>
	<div>
		<ul>
			<li v-for="item in list " :key="item.id">
				<div class="contain">
					<article>
						<img :src="item.img">
						<p>{{item.city}}</p>
					</article>
					<aside>
						<h3>{{item.txt}}</h3>
						<h4>{{item.title}}</h4>
						<p>
							￥<strong>{{item.price}}</strong>起
							<em>{{item.num}}已报名</em>
						</p>
					</aside>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:'TravelList',
		data(){
			return{
				list:[
					{id:1,img:'/ttaimg/tracate2.jpg',txt:'[山海奇遇·跟着课本游桂林]《国家地理旅行版》龙脊梯田-兴坪古镇-相公山-壮寨生活体验-竹筒饭制作-地心历险-遇龙河竹筏-鱼鹰捕鱼桂林亲子5日',price:'2280',num:'584',city:'桂林出发',title:'跟团游 亲子游 5天4晚'},
					{id:2,img:'/ttaimg/tracate3.jpg',txt:'[跟着皇帝游江南]南京栖霞山-镇江西津渡-无锡寄畅园-太湖鼋头渚-苏州虎丘，制香囊/惠山泥人/手绘宝塔，品早茶/赠汉服体验，宿房车营地（亲子5日游学）',price:'2250',num:'15',city:'南京出发',title:'跟团游 亲子游 5天4晚'},
					{id:3,img:'/ttaimg/tracate4.jpg',txt:'[高铁直达·玩转古徽州]寒假报名中，穿越千年跟着课本游桃花潭，行走于徽派绝世水墨画中，手作徽毛笔/呈坎大作战/黄山脚下房车观星/隐秘古村寻味（4日亲子游学）',price:'1080',num:'506',city:'黄山出发',title:'跟团游 亲子游 4天3晚'},
					{id:4,img:'/ttaimg/tracate5.jpg',txt:'[山海奇遇·贵州]全年批次—地心恒温15℃的奇趣历险，酷玩森林（洞穴露营+溜索+速降）、平塘天眼探秘宇宙、老寨定向寻古、荔波小七孔精华游览，适合5岁以上孩子，品质住宿5日',price:'3980',num:'311',city:'贵阳出发',title:'跟团游 亲子游 5天4晚'},
					{id:5,img:'/ttaimg/tracate6.jpg',txt:'[游侠少年·新加坡游学]机器编程科技课堂-访学世界高等学府-全浸润式双语课程-狮城探索-多元文化英语定向-疯狂动物城,7天研学之旅',price:'1680',num:'4980',city:'上海出发',title:'跟团游 亲子游 7天6晚'},
					{id:6,img:'/ttaimg/tracate7.jpg',txt:'[游侠宝贝 • 奇趣沙巴]闯进“亚洲亚马逊”（婆罗洲雨林航行）-探秘海底世界（环滩岛浮潜）-萤火虫之夜-神山大冒险，6天5晚马来西亚博物之旅',price:'1680',num:'4980',city:'上海出发',title:'跟团游 亲子游 7天6晚'},
					{id:7,img:'/ttaimg/tracate8.jpg',txt:'[向野房车 • 长白山亲子]Van To Snow丨遇见云顶“天池”/国际滑雪体验/欢乐冰雪运动会/北方渔猎文化“冬捕”/两极温泉/寻访朝鲜村落/“不冻河”漂流雪国6日游',price:'5280',num:'120',city:'上海出发',title:'跟团游 亲子游 6天5晚'},
					{id:8,img:'/ttaimg/tracate9.jpg',txt:'[游侠少年·新加坡游学]机器编程科技课堂-访学世界高等学府-全浸润式双语课程-狮城探索-多元文化英语定向-疯狂动物城,7天研学之旅',price:'4950',num:'34',city:'吉林市出发',title:'跟团游 亲子游 6天5晚'},
					{id:9,img:'/ttaimg/tracate10.jpg',txt:'[冰雪奇遇·极地漠河] 一路向北看祖国  圣诞村滑雪，拜访圣诞老人、驯鹿近距离接触、打卡北极村最北邮局&升国旗、边境冬捕，多重体验东北5日（含火车票）',price:'2680',num:'50',city:'哈尔滨出发',title:'跟团游 亲子游 5天4晚'},
					{id:10,img:'/ttaimg/tracate11.jpg',txt:'[游侠研学 • 三星堆来杭展览啦~]浙江西湖美术馆—三星堆特展/热搜中的圆头金面/20世纪人类zui伟大的考古发现之一/揭秘古蜀文明的神秘面纱，亲子半日人文课堂',price:'1680',num:'4980',city:'上海出发',title:'同城活动 亲子活动 1天'},
					{id:11,img:'/ttaimg/tracate12.jpg',txt:'[游侠研学 • 运河两岸阔]走进京杭大运河博物馆，跟着帝王下江南/ 什么叫漕运/杭州拱宸桥的意义/一条运河史一个中国民族史/PBL课堂教学，亲子半日研学人文课堂',price:'268',num:'182',city:'上海出发',title:'同城活动 亲子活动 1天'},
					{id:12,img:'/ttaimg/tracate13.jpg',txt:'[游侠人文 • 华夏通史]专家带队洛阳历史游，探访河南博物院/商代遗址/夏都二里头/汉魏洛阳故城/龙门石窟/天子驾六博物馆/体验古都寻行，5天4晚领略中国历史脉络',price:'6880',num:'4980',city:'上海出发',title:'跟团游 深度人文 5天4晚'},
				]
			}
		}
	}
</script>

<style scoped>
	ul{
		width: 100%;
	}
	ul li{
		width: 45%;
		float: left;
	}
	ul li:nth-child(even){
		margin-top: 2%;
		margin-left: 2%;
	}
	.contain{
		float: left;
		width: 100%;
		position: relative;
		border: 1px solid gainsboro;
		margin: 0.2rem .2rem;
		height: 6rem;
		border-radius: .3rem;
	}
	.contain img{
		height: 3.5rem;
		width: 100%;
		border-radius: .3rem .3rem 0 0;
	}
	.contain article p{
		top: 0;
		border-radius: 0.3rem 0 0.3rem 0;
		left: .01rem;
		width: 1.2rem;
		text-align: center;
		line-height: .5rem;
		height: .5rem;
		background-color: rgba(0,0,0,0.3);
		position: absolute;
		color: white;
	}
	.contain aside h3{
		text-indent: 1em;
		margin-top: .3rem;
		font-weight: bold;
		font-size: .35rem;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.contain aside h4{
		text-indent: 1em;
		font-size: .3rem;
		margin-top: .1rem;
		color: #808080;
	}
	.contain aside p{
		color: #ff7100;
		margin-top: .3rem;
		text-indent: 1em;
	}
	.contain aside p strong{
		font-size: .4rem;
		text-indent: 1em;
		font-weight: bold;
		color: #ff7100;
	}
	.contain aside p em{
		color: #808080;
		margin-left: 36%;
	}
</style>
